<template>
  <!-- 我的 -->
  <div>
    <van-image width="100%" :src="imgs" class="imgs" />
    <div class="box">
      <p v-text="uname"></p>
      <van-button
        v-if="!token"
        type="primary"
        size="normal"
        color="#21b97a"
        class="button"
        @click="$router.push('/login')"
        >去登录</van-button
      >
      <van-button
        v-else
        type="primary"
        size="normal"
        color="#21b97a"
        class="button"
        @click="quit"
      >
        退出登录
      </van-button>
      <p v-show="token" class="condition">编辑资料</p>
    </div>
    <div class="header">
      <van-image
        width="100%"
        height="100%"
        src="http://liufusong.top:8080/img/profile/avatar.png"
      />
    </div>
    <van-grid :column-num="3" :border="false" route>
      <van-grid-item
        icon="star-o"
        text="我的收藏"
        @click="$router.push('/myfavorite')"
      />
      <van-grid-item
        icon="wap-home-o"
        text="我的出租"
        @click="$router.push('/rentout')"
      />
      <van-grid-item icon="clock-o" text="看房记录" />
      <van-grid-item icon="credit-pay" text="成为房主" />
      <van-grid-item icon="contact" text="个人资料" />
      <van-grid-item icon="service-o" text="联系我们" />
    </van-grid>
    <van-image
      class="foot"
      width="90%"
      height="100%"
      src="http://liufusong.top:8080/img/profile/join.png"
    />
  </div>
</template>

<script>
import { Dialog } from 'vant'
import { getToken, removeToken } from '@/utils/storgae'
import { userlist } from '@/api/user'
export default {
  name: 'my-page',
  data () {
    return {
      token: null,
      uname: '游客',
      imgs: 'http://liufusong.top:8080/img/profile/bg.png'
    }
  },
  methods: {
    quit () {
      Dialog.confirm({
        title: '提示',
        message: '是否确认退出'
      })
        .then(() => {
          this.token = null
          this.uname = '游客'
          this.imgs = 'http://liufusong.top:8080/img/profile/bg.png'
          removeToken()
        })
        .catch(() => {})
    }
  },
  async created () {
    this.token = getToken()
    const data = await userlist()
    this.imgs = 'http://liufusong.top:8080' + data.body.avatar
    this.uname = data.body.nickname
  }
}
</script>

<style scoped lang="less">
.imgs {
  margin-bottom: 40px;
  height: 300px;
}
.box {
  box-sizing: border-box;
  position: absolute;
  top: 135px;
  left: 30px;
  height: 170px;
  width: 85%;
  background-color: #fff;
  box-shadow: 0 0 10px 3px #ddd;
  text-align: center;
  margin: 0 auto;
  padding-top: 50px;
  margin-bottom: 10px;
  p {
    font-size: 14px;
  }
  .button {
    border-radius: 5px;
    width: 80px;
    height: 32px;
    font-size: 12px;
  }
  .condition {
    position: absolute;
    bottom: 8px;
    font-size: 10px;
    left: 50%;
    transform: translate(-50%);
  }
}
.header {
  position: absolute;
  border-radius: 50%;
  top: 110px;
  left: 150px;
  background-color: #fff;
  width: 70px;
  height: 70px;
  border: 5px solid #f5f5f5;
}
.foot {
  margin-left: 18px;
}
</style>
